<template>
  <div class="wrap">
    <input type="checkbox" :checked="item.complete" />
    <span>{{ item.title }}</span>
    <span class="delBtn">删除</span>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  methods: {
    delItem: function () {
      this.$emit("delItem", this.item.title);
    },
  },
};
</script>

<style scoped>
.wrap {
  display: flex;
  padding: 1vmin;
  border-bottom: 1px solid #fffae577;
  cursor: default;
  transition: all 0.3s linear;
  margin-top: 1vmin;
  position: relative;
  overflow: hidden;
  align-items: center;
}
.wrap:hover {
  background: #6b664e94;
}
.wrap input[type="checkbox"] {
  background: #fffae5;
  margin-right: 1vmax;
  border: none;
}
.wrap span {
  color: #fffae5;
}
.wrap:hover .delBtn {
  visibility: visible;
  opacity: 1;
  transform: translate(0);
}
.delBtn {
  transform: translate(10vmin);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 1vmin;
  font-size: 1.5vmax;
  cursor: pointer;
  transition: all 0.3s 0.3s linear;
}
.delBtn:hover {
  color: rgb(240, 133, 133);
  letter-spacing: 3px;
  font-size: 2vmax;
}
</style>